<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="dataManipulationLogFormQueryRef" :model="dataManipulationLogFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="操作时间段">
              <DateUnixTimeRange v-model:startDate="dataManipulationLogFormQueryModel.operationTimesAndGe" v-model:endDate="dataManipulationLogFormQueryModel.operationTimesAndLe" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <Dict v-model="dataManipulationLogFormQueryModel.operationMethod" dictKey="dataOperationMethod" formItemName="operationMethod" />
          </a-col>
          <a-col :span="6">
            <Dict v-model="dataManipulationLogFormQueryModel.nexusType" dictKey="accountNexusType" formItemName="nexusType" />
          </a-col>
          <a-col :span="6">
            <a-form-item label="数据Id">
              <a-input v-model:value="dataManipulationLogFormQueryModel.dataId" placeholder="输入数据Id" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="数据对象类名">
              <a-input v-model:value="dataManipulationLogFormQueryModel.dataObjectClassNameAndLike" placeholder="输入数据对象类名" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="操作人">
              <a-input v-model:value="dataManipulationLogFormQueryModel.operationNameAndLike" placeholder="输入操作人" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="操作人Id">
              <a-input v-model:value="dataManipulationLogFormQueryModel.operationId" placeholder="输入操作人Id" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="操作账号Id">
              <a-input v-model:value="dataManipulationLogFormQueryModel.operationAid" placeholder="输入操作账号Id" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="dashed" :style="{ ...coreStyle.antBtnReset }" @click="dataManipulationLogFormQueryReset">
          <CoreIcon :icon="coreStyle.antBtnIconReset" :size="14" />
          重置
        </a-button>
        <a-button :loading="dataManipulationLogFormQuerySubmitting" type="dashed" :style="{ ...coreStyle.antBtnQuery }" @click="dataManipulationLogFormQuerySearch">
          <CoreIcon :icon="coreStyle.antBtnIconQuery" :size="14" />
          查询
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="dashed" ghost shape="circle" :style="{ ...coreStyle.antBtnRefresh }" @click="dataManipulationLogListGetDataSet">
          <CoreIcon :icon="coreStyle.antBtnIconRefresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="dataManipulationLogListColumns"
        :data-source="dataManipulationLogListDataSet"
        :loading="dataManipulationLogListLoading"
        :pagination="false"
        bordered
        :customRow="dataManipulationLogListCustomRow"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
        <template #operationTimesData="{ text }">
          <span>{{ new Date(text).format() }}</span>
        </template>
        <template #operationMethodData="{ text }">
          <span>{{ coreToolStore.getDictDisplayName('dataOperationMethod', text) }}</span>
        </template>
        <template #nexusTypeData="{ text }">
          <span>{{ coreToolStore.getDictDisplayName('accountNexusType', text) }}</span>
        </template>
        <template #dataIdTitle>
          <span>数据Id<a-tag color="orange" :style="{ 'line-height': '19px', ...coreStyle.marginLeft(8) }">点击数据Id追踪数据</a-tag></span>
        </template>
        <template #dataIdData="{ text }">
          <span><a @click="dataManipulationLogDataTracking(text)">{{ text }}</a></span>
        </template>
      </a-table>
      <a-pagination
        v-model:current="dataManipulationLogListDataPage"
        v-model:pageSize="dataManipulationLogListDataRows"
        :total="dataManipulationLogListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="dataManipulationLogListPaginationChange"
        @showSizeChange="dataManipulationLogListPaginationShowSizeChange"
        v-if="dataManipulationLogListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!dataManipulationLogListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(dataManipulationLogListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="dataManipulationLogDetailDrawerVisible"
      title="数据操作日志详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" size="small" :column="2" bordered>
          <a-descriptions-item label="操作人" :span="1">{{ dataManipulationLogDetailModel.operationName }}</a-descriptions-item>
          <a-descriptions-item label="操作时间" :span="1">{{ new Date(dataManipulationLogDetailModel.operationTimes).format() }}</a-descriptions-item>
          <a-descriptions-item label="操作方法" :span="1">{{ coreToolStore.getDictDisplayName('dataOperationMethod', dataManipulationLogDetailModel.operationMethod) }}</a-descriptions-item>
          <a-descriptions-item label="操作账号Id" :span="1">{{ dataManipulationLogDetailModel.operationAid }}</a-descriptions-item>
          <a-descriptions-item label="关联类型" :span="1">{{ coreToolStore.getDictDisplayName('accountNexusType', dataManipulationLogDetailModel.nexusType) }}</a-descriptions-item>
          <a-descriptions-item label="操作人Id" :span="1">{{ dataManipulationLogDetailModel.operationId }}</a-descriptions-item>
          <a-descriptions-item label="数据对象类名" :span="2">{{ dataManipulationLogDetailModel.dataObjectClassName }}</a-descriptions-item>
          <a-descriptions-item label="数据Id" :span="2">{{ dataManipulationLogDetailModel.dataId }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="数据对象" size="small" :column="1" bordered>
          <a-descriptions-item v-for="(value, key) in JSON.parse(dataManipulationLogDetailModel.dataContent)" :label="key" :span="1">{{ value }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
    </a-drawer>
    <a-drawer
      v-model:visible="dataManipulationLogDataTrackingDrawerVisible"
      title="数据追踪信息"
      placement="right"
      :closable="false"
      :width="'75%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <div :style="{ ...coreStyle.height(790) }">
        <ScrollContainer>
          <a-space :size="20" :style="{ ...coreStyle.width('100%') }">
            <div v-for="item in dataManipulationLogDataTrackingListDataSet" :key="item.id" :style="{ ...coreStyle.width(460) }">
              <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
                <a-descriptions title="基础信息" size="small" :column="1" bordered>
                  <a-descriptions-item label="操作时间" :span="1">{{ new Date(item.operationTimes).format() }}</a-descriptions-item>
                  <a-descriptions-item label="操作方法" :span="1">{{ coreToolStore.getDictDisplayName('dataOperationMethod', item.operationMethod) }}</a-descriptions-item>
                  <a-descriptions-item label="关联类型" :span="1">{{ coreToolStore.getDictDisplayName('accountNexusType', item.nexusType) }}</a-descriptions-item>
                  <a-descriptions-item label="操作人" :span="1">{{ item.operationName }}</a-descriptions-item>
                  <a-descriptions-item label="操作人Id" :span="1">{{ item.operationId }}</a-descriptions-item>
                  <a-descriptions-item label="操作账号Id" :span="1">{{ item.operationAid }}</a-descriptions-item>
                  <a-descriptions-item label="数据对象类名" :span="2">{{ item.dataObjectClassName }}</a-descriptions-item>
                  <a-descriptions-item label="数据Id" :span="2">{{ item.dataId }}</a-descriptions-item>
                </a-descriptions>
                <a-descriptions title="数据对象" size="small" :column="1" bordered>
                  <a-descriptions-item v-for="(value, key) in JSON.parse(item.dataContent)" :label="key" :span="1">{{ value }}</a-descriptions-item>
                </a-descriptions>
              </a-space>
            </div>
          </a-space>
        </ScrollContainer>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useDataManipulationLogStore } from '/@/store/modules/cn/core/data/dataManipulationLogStore'

import type { DataManipulationLog } from '/@/model/cn/core/data/eo/DataManipulationLog'
import { toDataManipulationLog } from '/@/model/cn/core/data/eo/DataManipulationLog'

import type { DataManipulationLogQO } from '/@/model/cn/core/data/qo/DataManipulationLogQO'
import { toDataManipulationLogQO } from '/@/model/cn/core/data/qo/DataManipulationLogQO'

import type { DataManipulationLogVO } from '/@/model/cn/core/data/vo/DataManipulationLogVO'
import { toDataManipulationLogVO } from '/@/model/cn/core/data/vo/DataManipulationLogVO'

@Options({
  name: 'CoreDataManipulationLog',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useDataManipulationLogStore),
  },
})
export default class CoreDataManipulationLog extends Vue {

  dataManipulationLogListDataSet: Array<DataManipulationLogVO> = []

  dataManipulationLogListColumns: Array<object> = [
    {
      title: '操作时间',
      dataIndex: 'operationTimes',
      align: 'center',
      slots: { customRender: 'operationTimesData' },
      // ellipsis: true,
      width: 200,
    },
    {
      title: '操作方法',
      dataIndex: 'operationMethod',
      align: 'center',
      slots: { customRender: 'operationMethodData' },
      // ellipsis: true,
      width: 150,
    },
    {
      title: '关联类型',
      dataIndex: 'nexusType',
      align: 'center',
      slots: { customRender: 'nexusTypeData' },
      // ellipsis: true,
      width: 100,
    },
    {
      title: '操作人',
      dataIndex: 'operationName',
      align: 'center',
      // ellipsis: true,
      width: 200,
    },
    {
      title: '数据对象类名',
      dataIndex: 'dataObjectClassName',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      // title: '数据Id',
      dataIndex: 'dataId',
      align: 'center',
      slots: { title: 'dataIdTitle', customRender: 'dataIdData' },
      // ellipsis: true,
      // width: 200,
    },
  ]

  dataManipulationLogListLoading: boolean = false

  dataManipulationLogListSelectedRowKeys: string[] = []

  dataManipulationLogListSelectData: Array<DataManipulationLogVO> = []

  dataManipulationLogListSelectLength: number = 0

  dataManipulationLogListSelectCurrentRowIndex: number = -1

  dataManipulationLogListSelectCurrentRowData: DataManipulationLogVO = toDataManipulationLogVO()

  dataManipulationLogListPaginationVisible: boolean = true

  dataManipulationLogListDataPage: number = 1

  dataManipulationLogListDataRows: number = 10

  dataManipulationLogListDataCount: number = 0

  dataManipulationLogListRowOnChange(selectedRowKeys, selectedRows) {
    this.dataManipulationLogListSelectedRowKeys = [ ...selectedRowKeys ]
    this.dataManipulationLogListSelectData = [ ...selectedRows ]
    this.dataManipulationLogListSelectLength = selectedRows.length
  }

  dataManipulationLogListCustomRow(record, index) {
    return {
      onDblclick: (event) => {
        this.dataManipulationLogStore.pkVo(this.$toParam<DataManipulationLogQO>({ id: record.id } as DataManipulationLogQO)).then((res: Res<DataManipulationLogVO>) => {
          if (res.succ) {
            this.dataManipulationLogDetailModel = { ...res.data[0] }
            this.dataManipulationLogDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  dataManipulationLogListGetDataSet() {
    this.dataManipulationLogListLoading = true
    this.dataManipulationLogListRowOnChange([], [])
    this.dataManipulationLogListSelectCurrentRowIndex = -1
    this.dataManipulationLogListSelectCurrentRowData = toDataManipulationLogVO()
    this.dataManipulationLogStore.pagingVo(this.$toParam<DataManipulationLogQO>({ operationTimesDesc: 'y' } as DataManipulationLogQO, this.dataManipulationLogListDataPage, this.dataManipulationLogListDataRows)).then((res: Res<DataManipulationLogVO>) => {
      if (res.succ) {
        this.dataManipulationLogListPaginationVisible = true
        this.dataManipulationLogListDataSet = [ ...res.data ]
        this.dataManipulationLogListDataCount = res.count
        setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
    })
  }

  dataManipulationLogListPaginationChange() {
    this.dataManipulationLogListGetDataSet()
  }

  dataManipulationLogListPaginationShowSizeChange() {
    this.dataManipulationLogListGetDataSet()
  }

  dataManipulationLogFormQueryVisible: boolean = false

  dataManipulationLogFormQuerySubmitting: boolean = false

  dataManipulationLogFormQueryModel: DataManipulationLogQO = toDataManipulationLogQO()

  dataManipulationLogFormQueryUpDown() {
    this.dataManipulationLogFormQueryVisible = !this.dataManipulationLogFormQueryVisible
  }

  dataManipulationLogFormQueryReset() {
    if (this.$refs.dataManipulationLogFormQueryRef) {
      this.$refs.dataManipulationLogFormQueryRef.resetFields()
      this.dataManipulationLogFormQueryModel = toDataManipulationLogQO()
    }
  }

  dataManipulationLogFormQuerySearch() {
    this.dataManipulationLogFormQuerySubmitting = true
    this.dataManipulationLogListLoading = true
    this.dataManipulationLogListRowOnChange([], [])
    this.dataManipulationLogListSelectCurrentRowIndex = -1
    this.dataManipulationLogListSelectCurrentRowData = toDataManipulationLogVO()
    this.dataManipulationLogStore.queryVo(this.$toParam<DataManipulationLogQO>(this.$toSearch({ ...this.dataManipulationLogFormQueryModel }))).then((res: Res<DataManipulationLogVO>) => {
      if (res.succ) {
        this.dataManipulationLogListPaginationVisible = false
        this.dataManipulationLogListDataSet = [ ...res.data ]
        this.dataManipulationLogListDataCount = res.count
        setTimeout(() => { this.dataManipulationLogFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.dataManipulationLogFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.dataManipulationLogFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.dataManipulationLogListLoading = false }, 500)
    })
  }

  dataManipulationLogDetailDrawerVisible: boolean = false

  dataManipulationLogDetailModel: DataManipulationLogVO = toDataManipulationLogVO()

  dataManipulationLogDetailInfo() {
    this.dataManipulationLogStore.pkVo(this.$toParam<DataManipulationLogQO>({ id: this.dataManipulationLogListSelectData[0].id } as DataManipulationLogQO)).then((res: Res<DataManipulationLogVO>) => {
      if (res.succ) {
        this.dataManipulationLogDetailModel = { ...res.data[0] }
        this.dataManipulationLogDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  dataManipulationLogDataTrackingDrawerVisible: boolean = false

  dataManipulationLogDataTrackingListDataSet: Array<DataManipulationLog> = []

  dataManipulationLogDataTracking(value) {
    this.dataManipulationLogStore.query(this.$toParam<DataManipulationLogQO>({ dataId: value, operationTimesAsc: 'y' } as DataManipulationLogQO)).then((res: Res<DataManipulationLog>) => {
      if (res.succ) {
        this.dataManipulationLogDataTrackingListDataSet = [ ...res.data ]
        this.dataManipulationLogDataTrackingDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.dataManipulationLogFormQueryModel.operationTimesDesc = 'y'
    this.dataManipulationLogListGetDataSet()
  }

}
</script>

<style scoped lang="less">

a:hover {
  text-decoration: underline;
}

</style>
